<template>
	<view>
		
		<view class="member_nav">
			<u-navbar :title="shopNanme" 
				:autoBack="true" 
				:bgColor="bgColor" 
				height="44" 
				leftIconColor="#ffffff"
				titleStyle="color:#fff"
			>
			</u-navbar>				
		</view>

		<view class="member_scroll" :animation="animationData">
			<u-navbar leftText="返回" :autoBack="true" height="44">
				<view class="u-nav-slot dflex scrollLogo aic" slot="left">
					<u-icon name="arrow-left" size="24"></u-icon>
					<text class="f14 fbold u-line-1" style="max-width: 230px;">{{ shopNanme }}</text>
				</view>
			</u-navbar>
		</view>
		
		<view class="member_banner">
			<view class="shop_header_mask p_absolute" style="z-index: 5;"></view>
			<u-image :showLoading="true" :src="shop_pic" :width="sysWidth" height="180"></u-image>
		</view>

		<view>

			<view class="dflex jcsb aic wrap_nb">
				<view class="">
					<text class="f18 fbold">{{ shopNanme }}</text>
					<view class="mt5 dflex f12 text_tag">
						<text>{{ goods_category }}</text>
					</view>
				</view>
				<view class="dflex f14 main_bg_reversal p6 radius5" v-if="merchant_fav_status" @click="dismerchantsFav">
					<image src="@/static/cang_h.png" class="w20 mr5"></image>
					<text>已收藏</text>
				</view>
				<view class="dflex f14 main_bg p6 radius5" @click="clickMerchantsFav" v-else>
					<image src="@/static/cang.png" class="w20 mr5"></image>
					<text>收藏</text>
				</view>
			</view>

			<view class="wrap_nb">
				<u-line></u-line>
			</view>

			<view class="dflex jcsb wrap_nb">
				<view class="cflex mr12">
					<text class="f14 u-line-2">{{ location_detail }}</text>
					<text class="f12 ca3a3a3 mt5">{{ distanceText }}</text>
				</view>
				<view class="dflex">
					<view class="cflex aic mr10" @click="openSonLocation">
						<image src="@/static/dh.png" mode="" class="w30"></image>
						<text class="f14 mt5">导航</text>
					</view>
					<view class="cflex aic ml10" @click="makePhoneCall">
						<image src="@/static/phone.png" mode="" class="w30"></image>
						<text class="f14 mt5">电话</text>
					</view>
				</view>
			</view>

			<view class="mt12">
				<u-gap height="5" bgColor="#eee"></u-gap>
			</view>

			<view class="wrap">
				<view class="dflex jcsb">
					<u-tabs :list="shop_tab" :activeStyle="{fontWeight: 'bold', transform: 'scale(1.05)'}"
						:inactiveStyle="{fontSize: '14px'}" lineWidth="25" lineHeight="5" lineColor="#FFD84A"
						@click="click_tab" height="44px">
					</u-tabs>
				</view>

				<!-- box -->
				<view class="dflex jcsb mt12" v-for="(item, index) in merchant_goods" :key="index" v-if="show_goods">
					<image :src="JSON.parse(item.merchant_pics)[0]" class="w105 radius15" @click="openDetail"
						:data-goodsid="item.id" mode="aspectFill"></image>
					<view class="cflex fg1" style="align-content: space-between;" @click="openDetail"
						:data-goodsid="item.id">
						<text class="f14 u-line-1 ml10">{{ item.merchant_goods_title }}</text>
						<view class="dflex ml10 aic mt5">
							<text class="p3 main_bg f10 mr5 radius5">官方</text>
							<text class="p3 border_ccc f10 mr5 radius5 ca3a3a3">周末节假日通用</text>
							<text class="p3 border_ccc f10 radius5 ca3a3a3">随时退 · 过期退</text>
						</view>
						<view class="dflex jcsb ml10 mt12">
							<text class="f12 ca3a3a3"
								style="align-self: flex-end;">已售{{ item.sell_count < item.fake_sell_count ? item.fake_sell_count : item.sell_count }}</text>
							<view class="dflex">
								<view class="cflex">
									<view>
										<text class="f12">￥{{ item.merchant_goods_total_price }}</text>
										<text class="f12 main_price_color">￥</text>
										<text
											class="f16 fbold main_price_color">{{ item.merchant_goods_sell_price }}</text>
									</view>
									<view class="dflex aic main_price_bg p3 radius5 jcc">
										<image src="@/static/label.png" class="w10" mode=""></image>
										<text
											class="f10 main_price_color ml5">{{ ((item.merchant_goods_sell_price / item.merchant_goods_total_price) * 10).toFixed(1) }}折热销中</text>
									</view>
								</view>
								<view class="dflex f14 main_bg ptb6 plr20 radius5 aic ml5">
									<text class="ml5" @click="openDetail" :data-goodsid="item.id">抢购</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- box -->

				<view class="cflex mt12" v-if="show_comments">
					<view class="dflex jcsb aife w100percent">
						<view class="dflex f14">
							<text>评价({{ comment_count }})</text>
						</view>
						<view class="dflex f12" @click="moreComment">
							<text>更多评价</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>

					<view class="cflex mt20" v-for="(item, index) in comment_list" :key="index">
						<view class="dflex w100percent jcsb">
							<view class="dflex mr12">
								<image :src="item.user.avatar" mode="aspectFill" class="w30"></image>
							</view>
							<view class="dflex jcsb aifs w100percent f12">
								<view class="cflex">
									<view class="dflex">
										<text>{{ item.user.name }}</text>
									</view>
									<view class="dflex">
										<u-rate count="5" size="14" readonly="true" activeColor="#FFD84A"
											:value="item.rate" allowHalf="true"></u-rate>
									</view>
								</view>
								<view class="dflex">
									<text class="ca3a3a3">{{ item.updated_at }}</text>
								</view>
							</view>
						</view>
						<view class="cflex f14 mt12">
							<view class="dflex u-line-3">
								<text>{{ item.comment }}</text>
							</view>
							<u-scroll-list :indicator='false'>
								<view class="mt12 comment_box"  v-for="(item2, index2) in JSON.parse(item.pics)" @click="showBigCommentPic" :data-commentid="item.id"  :data-current="index2">
									<view class="dflex">
										<image :src="item2" mode="aspectFill" class="w105 radius10 mr12"></image>
									</view>
								</view>
							</u-scroll-list>
							<view class="dflex f12 p6 bg_F6F7 radius10" @click="openDetail"
								:data-goodsid="item.goods.id">
								<text>已购买：{{ item.goods.merchant_goods_title }}</text>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
				</view>

			</view>

		</view>

		<view class="p_fix zindex5"
			:style="'width: ' + sysWidth + 'px; background:#000; height: ' + sysHeight + 'px; top: 0; padding: ' + middle + 'px 0;'"
			v-if="showBigCommentPicPop" @click="closeBigCommentPicPop">
			<u-swiper 
				:list="big_list" 
				radius="0" 
				indicator 
				indicatorActiveColor="#ffd84a" 
				autoplay="false"
				img-mode="aspectFit" 
				:height="sysWidth"
				:current="bigCurrent"
			>
			</u-swiper>
		</view>

		<view class="dflex mt50 jcc" v-if="comment_empty">
			<u-empty mode="data" text="暂时没有任何评论呢"></u-empty>
		</view>


		<!-- 组件内有使用说明 -->
		<userCheck ref="userCheck" @userCheckStatus="userCheckStatus"></userCheck>
		
		<!-- 用于判断图片明亮度，没有使用 1/4 -->
		<!-- 引入组件及放置画布，canvas放在组件内会无法识别 -->
		<getColor ref="getColor" @picBrightValue="picBrightValue"></getColor>		
		<canvas canvas-id="myCanvas" style="position: fixed; top: -10000px;"></canvas>

		<version></version>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: "transparent",
				shop_tab: [{
					name: '套餐',
					type: 'goods'
				}, {
					name: '评价',
					type: 'comments'
				}],
				merchant_goods: [],
				merchant_phone: '',
				shopNanme: '',
				location_detail: '',
				latitude: '',
				longitude: '',
				tel: '',
				shop_pic: '',
				afterLogin: '',
				goods_fav_status: false,
				merchant_fav_status: false,
				user_latitude: '',
				user_longitude: '',
				distanceText: '',
				goods_category: '',
				show_comments: false,
				show_goods: true,
				comment_list: [],
				showBigCommentPicPop: false,
				big_list: [],
				sysWidth: '',
				sysHeight: '',
				middle: '',
				comment_empty: false,
				comment_count: 0,
				animationData: {},
				customNavHeight: '',
				statusBarHeight: '',
				bigCurrent : 0,
				bright : false //用于判断图片明亮度，没有使用 2/4
			}
		},
		watch : {
			//用于判断图片明亮度，没有使用 3/4
			shop_pic (newVal, oldVal) {
				// console.log('newVal', newVal)
				if(newVal != '') {
					this.$refs.getColor.getColor(newVal)
				}
			}
		},
		onLoad(e) {
			this.mid = e.mid
			//获取code一键登录
			this.$refs.userCheck.getWxCode()
			this.getShopDetail(this.mid)
			this.getmerchantsFav()
			//计算评论图片弹出时设备的高宽			
			var sys = uni.getSystemInfoSync()
			this.sysWidth = sys.screenWidth
			this.sysHeight = sys.screenHeight
			this.statusBarHeight = sys.statusBarHeight
			this.customNavHeight = this.statusBarHeight + 6
			this.popHeight = (sys.screenHeight / 2).toFixed(0)
			this.middle = ((sys.screenHeight / 2) - (sys.screenWidth / 2)).toFixed(0)
		},
		onPageScroll(e) {
			// console.log('e',e)
			if (e.scrollTop < 165) {
				this.customNavHeight = this.statusBarHeight + 6 + e.scrollTop
			}
			if (e.scrollTop > 100) {
				this.scrollMenu = true
				this.animation_menu('down')
				this.topMenu = false
			}
			if (e.scrollTop < 100) {
				this.scrollMenu = false
				this.animation_menu('up')
				this.topMenu = true
			}
			//根据scrollTop值超过某个临界点，设置不同的css样式
			// this.scrollTop = e.scrollTop;
		},
		methods: {
			//用于判断图片明亮度，没有使用 4/4
			picBrightValue(res) {
				// console.log('this.bright1111', res)
				this.bright = res
			},
			animation_menu(res) {
				//创建动画
				var animation = uni.createAnimation({
					transformOrigin: "ease-in",
					duration: 300, //动画持续1秒
					// timingFunction: 'linear',  //linear 全程匀速运动
					// delay:300  //延迟两秒执行动画
				})
				this.animation = animation

				if (res == 'down') {
					animation.opacity(1).step()
				} else {
					animation.opacity(0).step()
				}

				this.animationData = animation.export()
			},
			moreComment() {
				uni.showToast({
					title: '没有更多评论',
					icon: 'none'
				})
			},
			//获取评论大图
			showBigCommentPic(e) {
				var comment_id = e.currentTarget.dataset.commentid
				uni.showLoading({
					title: '加载中...',
				});
				uni.request({
					url: uni.getStorageSync('domain') + '/api/v1/comment/big_pic',
					data: {
						'comment_id': comment_id
					},
					method: 'GET',
					success: (res) => {
						console.log(res)
						this.big_list = JSON.parse(res.data.res)
						this.showBigCommentPicPop = true
						this.bigCurrent = e.currentTarget.dataset.current
						uni.hideLoading()
					}
				})
			},
			closeBigCommentPicPop() {
				this.showBigCommentPicPop = false
			},
			//获取当前位置
			getLocation() {
				uni.getLocation({
					success: (res) => {
						this.user_latitude = res.latitude,
							this.user_longitude = res.longitude
						this.distance(this.latitude, this.longitude)
						// console.log('this.latitude, this.longitude', this.latitude, this.longitude)
					},
					fail: (err) => {
						this.distanceText = '获取位置失败，无法计算距离及时间。'
					}
				})
			},
			//根据金纬度计算距离
			distance(lat1, lng1) {
				// console.log('cccccccccccccccccc')
				let lat2 = this.user_latitude;
				let lng2 = this.user_longitude;
				let rad1 = lat1 * Math.PI / 180.0;
				let rad2 = lat2 * Math.PI / 180.0;
				let a = rad1 - rad2;
				let b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(
					Math.sin(b / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				s = s.toString();
				s = s.substring(0, s.indexOf('.') + 2);
				// console.log('sssssssssssssss', s)
				let carSpeed = 30 //每小时30公里
				let carNeedTime = ((s / carSpeed) * 60).toFixed(0)
				this.distanceText = '据你' + s + '公里，驾车' + carNeedTime + '分钟'
			},
			clickMerchantsFav() {
				//先判断登录，如果没有登录，赋值‘goodsfav’
				//当userCheckStatus收到子组件返回的数据时
				//根据不同的赋值继续操作
				this.$refs.userCheck.user_check()
				this.afterLogin = 'gotoMerchantsFav'
			},
			userCheckStatus(res) {
				//收藏商品
				// console.log(123)
				if (this.afterLogin == 'gotoMerchantsFav') {
					if (res != 'already') {
						uni.setStorageSync("access_member_info", res.data)
					}
					this.merchantsFav()
				}
			},
			merchantsFav() {
				uni.showLoading({
					title: '加载中...',
				});
				uni.request({
					url: uni.getStorageSync('domain') + '/api/v1/favormerchant/',
					header: {
						'Accept': 'application/json',
						'Authorization': 'Bearer ' + uni.getStorageSync('access_member_info').access_token
					},
					data: {
						'mid': this.mid
					},
					method: 'POST',
					success: (res) => {
						// console.log(res)
						if (res.data.status == 'already' || res.data.status == 'success') {
							this.merchant_fav_status = true
						}
						uni.hideLoading()
					}
				})
			},
			dismerchantsFav() {
				uni.showLoading({
					title: '加载中...',
				});
				uni.request({
					url: uni.getStorageSync('domain') + '/api/v1/disfavormerchant/',
					header: {
						'Accept': 'application/json',
						'Authorization': 'Bearer ' + uni.getStorageSync('access_member_info').access_token
					},
					data: {
						'mid': this.mid
					},
					method: 'DELETE',
					success: (res) => {
						// console.log(res)
						if (res.data.status == 'success') {
							this.merchant_fav_status = false
						}
						uni.hideLoading()
					}
				})
			},
			getmerchantsFav() {
				uni.showLoading({
					title: '加载中...',
				});
				uni.request({
					url: uni.getStorageSync('domain') + '/api/v1/favormerchantstatus/',
					header: {
						'Accept': 'application/json',
						'Authorization': 'Bearer ' + uni.getStorageSync('access_member_info').access_token
					},
					data: {
						'mid': this.mid
					},
					method: 'GET',
					success: (res) => {
						// console.log(res)
						if (res.data.status == 'already') {
							this.merchant_fav_status = true
						}
						uni.hideLoading()
					}
				})
			},
			click_tab(e) {
				if (e.type == 'goods') {
					this.show_goods = true
					this.show_comments = false
					this.comment_empty = false
				}
				if (e.type == 'comments') {					
					this.loadComments()
					this.show_goods = false
					this.show_comments = true
				}
			},
			loadComments() {
				uni.showLoading({
					title: '加载中...',
				});
				uni.request({
					url: uni.getStorageSync('domain') + '/api/v1/comment/shop',
					method: 'GET',
					data: {
						'merchant_id': this.mid
					},
					success: (res) => {
						// console.log(res)
						if (res.data.res.comment != '') {
							this.comment_list = res.data.res.comment
							this.comment_count = res.data.res.count
						} else {
							this.comment_empty = true
						}
						uni.hideLoading()
					}
				})
			},
			openDetail(e) {
				var gid = e.currentTarget.dataset.goodsid;
				uni.navigateTo({
					url: "/packageShop/shop/detail?gid=" + gid + "&stype=shop"
				})
			},
			getShopDetail(gid) {
				uni.showLoading({
					title: '加载中...',
				});
				uni.request({
					url: uni.getStorageSync('domain') + '/api/v1/merchant/shop_detail',
					method: 'GET',
					data: {
						'merchant_id': gid
					},
					success: (res) => {
						var res = res.data.res
						this.merchant_goods = res.merchant_goods
						this.shopNanme = res.company_name
						this.location_detail = res.location_detail
						this.merchant_phone = res.contact_tel
						this.latitude = res.latitude
						this.longitude = res.longitude
						this.tel = res.contact_tel
						this.goods_category = res.goods_category
						this.shop_pic = JSON.parse(res.store_pic)[0]
						//计算距离\
						this.getLocation()
						uni.hideLoading()
					}
				})
			},
			openSonLocation() {
				uni.openLocation({
					latitude: Number(this.latitude),
					longitude: Number(this.longitude),
					success: (res) => {
						// console.log(res)
					}
				})
			},
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.merchant_phone,
					success() {
						uni.showToast({
							title: '号码接通中...',
							icon: 'none'
						})
					},
					fail() {
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.shop_header_mask {
		background: #000;
		opacity: 0.3;
		display: flex;
		height: 180px;
		width: 750rpx;
	}

	.comment_box {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.member_scroll {
		width: 100%;
		position: fixed;
		opacity: 0;
		top: 0;
		z-index: 10;
	}
</style>
